<!DOCTYPE HTML>
<html lang="zh-CN">
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<head>
    <link
            rel="stylesheet"
            type="text/css"
            href="../css/aqua.min.css"
    />

    <meta charset="UTF-8">
    <title>修改商品</title>
</head>

<body>
<form action="add" style="min-width: 30vw">
    <div class="title-area">
        修改商品
    </div>
    <div class="form-control-area">
        <div class="form-group">
            <label>编号</label><input type="text" class="form-control" id="id" name="id" value="12" disabled/>
        </div>
        <div class="form-group">
            <label>工厂</label>
            <select id="select_fac" name="fac_id" style="appearance: auto; ">
            </select>
        </div>
        <div class="form-group">
            <label>名称</label><input type="text" class="form-control" id="name" name="name" required/>
        </div>
        <div class="form-group">
            <label>描述</label><input type="text" class="form-control" id="description" name="description" required/>
        </div>
        <div class="form-group">
            <label>价格</label><input type="text" class="form-control" id="price" name="price" required/>
        </div>
    </div>
    <div class="form-submit-area">
        <div style="text-align: left; float: left">
            <button type="button" class="btn btn-secondary add-btn" onclick="location.replace('list.html')">返回</button>
        </div>
        <button type="button" onclick="mySubmit()" class="btn btn-primary">提交</button>
    </div>
</form>
</body>
</html>
<script src="../js/jquery-3.6.0.min.js"></script>

<script type="application/javascript">
    function getQueryVariable(variable)
    {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }

    let domNameArr = ["id", "select_fac", "name", "description", "price"]
    let id = getQueryVariable("id")
    console.log(id)
    let idDom = document.getElementById('id');
    idDom.value = id
    const select = document.getElementById('select_fac');
    // 需要先ajax获取到所有的factory，之后动态添加到select_fac中
    $.ajax({
        url: "http://localhost:9527/api/factory/list", success: function (result) {
            console.log(result)
            for (let i = 0; i < result.length; i++) {
                // console.log(result[i])
                //添加到select下拉选择框中
                select.options.add(new Option(result[i].name, result[i].id));
            }
            console.log("获取数据成功")
        }
    });

    $.ajax({
        url: "http://localhost:9527/api/commodity/list?id="+id, success: function (result) {

            result = result[0]
            document.getElementById("select_fac").value = result.fac_id
            document.getElementById("name").value = result.name
            document.getElementById("description").value = result.description
            document.getElementById("price").value = result.price
            // let ks = result.keys()
            // for (let i = 0; i < domNameArr.length; i++) {
            //     let ele = document.getElementById(domNameArr[i]);
            //     console.log(result[ks[i]])
            //     ele.value = result[ks[i]]
            // }

            // for (let i = 0; i < result.length; i++) {
            //     select.options.add(new Option(result[i].name, result[i].id));
            // }
            // console.log("获取数据成功")
        }
    });

    function checkPrice() {
        let re = /^[0-9]+(.[0-9]{1,3})?$/
        let priceDom = document.getElementById("price");
        let price = priceDom.value;
        priceDom.setCustomValidity("")
        if (price == ''){
            priceDom.setCustomValidity("请填写此字段")
            priceDom.reportValidity()
        }
        else if (re.test(price)==false){
            priceDom.setCustomValidity("格式不符合小数要求")
            priceDom.reportValidity()
        }
        else {
            priceDom.setCustomValidity("")
        }
    }

    window.onload = function () {
        document.getElementById("price").oninput = checkPrice;
    }

    function mySubmit() {

        let flag = true

        for (let i = 0; i < domNameArr.length; i++) {
            let ele = document.getElementById(domNameArr[i]);
            if (!ele.checkValidity()){
                flag = false
                ele.reportValidity()
                break
            }

        }

        if (flag == false) {
            // alert("bad")
        } else {
            console.log('submit')
            for (let i = 0; i < domNameArr.length; i++) {
                let ele = document.getElementById(domNameArr[i]);
                console.log(ele.value)
            }
            let commodity = {
                "id":'',
                "fac_id":'',
                "name":'',
                "description":'',
                "price":'',
            }
            let i = 0
            for (const k in commodity) {
                commodity[k] = document.getElementById(domNameArr[i]).value
                i++
            }
            console.log(commodity)
            JSON.stringify(JSON.stringify(commodity))

            $.ajax({
                url: "http://localhost:9527/api/commodity/update",
                contentType: "application/json;charset=utf-8",
                dataType: "json",
                data: JSON.stringify(commodity),
                method: "post",
                success: function (result) {
                    console.log(result)
                    for (let i = 0; i < result.length; i++) {
                        console.log(result[i])
                    }
                    console.log("add成功")
                    location.href = 'list.html'
                }
            });
        }
    }
</script>
<style>
    body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 97vh;
        /*width: 97vw;*/
        /*font-size: 14px;*/
        color: var(--secondary-color-darkest);
    }

    * {
        box-sizing: border-box;
    }

    .login-form {
        display: grid;
        row-gap: 1rem;
    }

    .title-area {
        font-size: 22px;
        margin-bottom: 1rem;
    }

    .form-control-area {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(2, 1fr);
        column-gap: 1.5rem;
        row-gap: 0.5rem;
    }

    .form-submit-area {
        margin-top: 1rem;
        text-align: right;
    }

    .form-group {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: repeat(2, 1fr);
        align-items: center;
    }

    .form-control {
        width: 100%;
    }

    #id{
        background-color: rgba(56,56,56,0.1);
        border-color: rgba(118, 118, 118, 0.3);
    }

    a {
        font-weight: bold;
        color: var(--primary-color-darker);
        text-decoration: none;
    }

    select {
        appearance: auto;
        border-color: rgba(0, 0, 0, 0.3);

        --input-padding: 0.5rem 0.5rem;
        --input-color: black;
        --input-bg: white;
        --input-border-color: rgba(0, 0, 0, 0.3);
        --input-radius: 4px;
        --input-placeholder-color: var(--secondary-color-darker);
        box-sizing: border-box;
        width: 100%;
        padding: var(--input-padding);
        margin: 0;
        color: var(--input-color);
        background: var(--input-bg);
        border: 1px solid var(--input-border-color);
        border-radius: var(--input-radius);
        /*transition: .3s;*/
    }

    .date {
        height: 37px;
        appearance: auto;
        border-color: rgba(0, 0, 0, 0.3);

        --input-padding: 0.5rem 0.5rem;
        --input-color: black;
        --input-bg: white;
        --input-border-color: rgba(0, 0, 0, 0.3);
        --input-radius: 4px;
        --input-placeholder-color: var(--secondary-color-darker);
        box-sizing: border-box;
        width: 100%;
        padding: var(--input-padding);
        margin: 0;
        color: var(--input-color);
        background: var(--input-bg);
        border: 1px solid var(--input-border-color);
        border-radius: var(--input-radius);
        transition: .3s;
    }


</style>
